<template>
  <!--  jiera-->
  <div class='people_info_container'>
    <div class='information'>
      <ElAvatar :src='data.avatar' :size='60' @click.stop='handleGoPersonalHome' class='cursor-pointer'></ElAvatar>
      <div class='introduction'>
        <div class='name' style='font-size: larger'>{{ data.name }}</div>
        <slot>
          <div class='des'>{{ data.description }}</div>
        </slot>
      </div>
    </div>
    <slot name='action'>
      <div v-if='currentUserId!=data.id'>
        <template v-if='data.isFollow===1'>
          <ElButton round @click='handleFollow(data.id)'>取消关注</ElButton>
        </template>
        <template v-else>
          <ElButton type='primary' round @click='handleFollow(data.id)'>+关注</ElButton>
        </template>
      </div>
    </slot>
  </div>
</template>

<script lang='ts' setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const currentUserId = computed(() => userStore.userInfo.uid || '1000000')

export interface FollowEntity {
  id: string | number,
  avatar?: string
  name: string
  description?: string
  isFollow?: string | number
  userId?: string | number
}

const $props = withDefaults(defineProps<{ data: FollowEntity }>(), {
  data: () => ({
    id: '',
    avatar: '',
    name: '',
    description: '',
    isFollow: '',
    userId:'',
  }),
})
console.log($props)

const $emit = defineEmits(['refresh'])
const handleFollow = async (id: string | number) => {
  await service.user.followUser(id)
  $emit('refresh')
}


const router = useRouter()
const handleGoPersonalHome = () => {
  router.push(`/main/personalHomepage?id=${$props.data.id}`)
}
</script>

<style lang='scss' scoped>
.people_info_container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .information {
    display: flex;
    gap: 10px;
    align-items: center;

    .introduction {
      .name {
        font-weight: 700;
      }

      .des {
        color: #999;
      }
    }
  }
}
</style>
